<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消息通知 - 护工助手</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/icons.css">
    <style>
        .page-header {
            background-color: #2B7DE1;
            color: white;
            padding: 12px 16px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .back-button {
            position: absolute;
            left: 16px;
            font-size: 20px;
            color: white;
        }
        
        .page-title {
            font-size: 17px;
            font-weight: 500;
        }
        
        .page-content {
            padding-top: 60px;
            padding-bottom: 80px;
        }
        
        .status-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 16px;
            background-color: #2B7DE1;
        }
        
        .time {
            font-size: 14px;
            color: white;
        }
        
        .status-icons {
            display: flex;
            gap: 5px;
            color: white;
        }
        
        .icon {
            font-size: 14px;
        }

        .tab-container {
            display: flex;
            padding: 0 16px;
            border-bottom: 1px solid #f0f0f0;
            background-color: white;
            margin-bottom: 10px;
        }
        
        .tab-item {
            flex: 1;
            text-align: center;
            padding: 14px 0;
            font-size: 15px;
            color: #666;
            position: relative;
        }
        
        .tab-item.active {
            color: #2B7DE1;
            font-weight: 500;
        }
        
        .tab-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 25%;
            width: 50%;
            height: 3px;
            background-color: #2B7DE1;
            border-radius: 2px;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .message-list {
            background-color: #f6f8fa;
            min-height: calc(100vh - 115px);
        }
        
        .message-item {
            padding: 16px;
            background-color: white;
            margin-bottom: 10px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            position: relative;
        }
        
        .message-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .message-title {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            display: flex;
            align-items: center;
        }
        
        .message-badge {
            width: 6px;
            height: 6px;
            background-color: #FF3B30;
            border-radius: 50%;
            margin-right: 8px;
            display: inline-block;
        }
        
        .message-time {
            font-size: 12px;
            color: #999;
        }
        
        .message-content {
            font-size: 14px;
            line-height: 1.6;
            color: #666;
        }
        
        .message-content p {
            margin: 0 0 8px 0;
        }
        
        .message-content p:last-child {
            margin-bottom: 0;
        }
        
        .message-action {
            display: flex;
            margin-top: 12px;
            justify-content: flex-end;
        }
        
        .action-button {
            padding: 6px 12px;
            font-size: 13px;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .action-button.primary {
            background-color: #2B7DE1;
            color: white;
            margin-right: 10px;
        }
        
        .action-button.secondary {
            background-color: #f0f0f0;
            color: #666;
        }
        
        .empty-message {
            text-align: center;
            padding: 80px 0;
            color: #999;
        }
        
        .empty-icon {
            font-size: 50px;
            margin-bottom: 16px;
            color: #ddd;
        }
        
        .empty-text {
            font-size: 15px;
        }
        
        .system-message .message-item {
            border-left: 3px solid #2B7DE1;
        }
        
        .order-message .message-item {
            border-left: 3px solid #FF9500;
        }
        
        .payment-message .message-item {
            border-left: 3px solid #34C759;
        }
        
        .read-all {
            background-color: white;
            text-align: center;
            padding: 12px;
            color: #2B7DE1;
            font-size: 14px;
            margin-bottom: 10px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }
        
        .swipe-action {
            position: absolute;
            top: 0;
            right: -80px;
            height: 100%;
            width: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #FF3B30;
            color: white;
            transition: transform 0.3s;
        }
        
        .message-item {
            position: relative;
            overflow: hidden;
        }
        
        .message-content-wrapper {
            transition: transform 0.3s;
        }
        
        .detail-page {
            background-color: white;
            padding: 16px;
            display: none;
        }
        
        .detail-title {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 12px;
            color: #333;
        }
        
        .detail-metadata {
            display: flex;
            margin-bottom: 16px;
        }
        
        .detail-time {
            font-size: 13px;
            color: #999;
            margin-right: 16px;
        }
        
        .detail-category {
            font-size: 13px;
            color: #999;
        }
        
        .detail-content {
            font-size: 15px;
            line-height: 1.8;
            color: #333;
        }
        
        .detail-content p {
            margin: 0 0 10px 0;
        }
        
        .close-detail {
            text-align: center;
            margin-top: 30px;
        }
        
        .close-button {
            padding: 10px 20px;
            background-color: #f0f0f0;
            border-radius: 6px;
            font-size: 14px;
            color: #666;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 顶部状态栏 -->
        <div class="status-bar">
            <span class="time">10:25</span>
            <div class="status-icons">
                <span class="icon">📶</span>
                <span class="icon">📡</span>
                <span class="icon">🔋</span>
            </div>
        </div>
        
        <!-- 页面头部 -->
        <header class="page-header">
            <a href="profile.html" class="back-button">←</a>
            <div class="page-title">消息通知</div>
        </header>
        
        <div class="page-content">
            <!-- 消息分类标签栏 -->
            <div class="tab-container">
                <div class="tab-item active" onclick="switchTab(0)">全部</div>
                <div class="tab-item" onclick="switchTab(1)">系统通知</div>
                <div class="tab-item" onclick="switchTab(2)">订单消息</div>
            </div>
            
            <!-- 全部消息 -->
            <div id="tab-0" class="tab-content active">
                <div class="read-all" onclick="markAllAsRead()">全部标为已读</div>
                
                <div class="message-list">
                    <!-- 系统消息 -->
                    <div class="message-item system-message" id="msg-1">
                        <div class="message-content-wrapper">
                            <div class="message-header">
                                <div class="message-title">
                                    <span class="message-badge"></span>
                                    实名认证审核通过
                                </div>
                                <div class="message-time">2023-11-05 10:30</div>
                            </div>
                            <div class="message-content">
                                <p>您的实名认证信息已审核通过，现在可以正常接单工作了。</p>
                            </div>
                            <div class="message-action">
                                <div class="action-button primary" onclick="viewMessageDetail(1)">查看详情</div>
                                <div class="action-button secondary" onclick="markAsRead(1)">标为已读</div>
                            </div>
                        </div>
                        <div class="swipe-action" onclick="deleteMessage(1)">删除</div>
                    </div>
                    
                    <!-- 订单消息 -->
                    <div class="message-item order-message" id="msg-2">
                        <div class="message-content-wrapper">
                            <div class="message-header">
                                <div class="message-title">
                                    <span class="message-badge"></span>
                                    新订单提醒
                                </div>
                                <div class="message-time">2023-11-04 15:45</div>
                            </div>
                            <div class="message-content">
                                <p>您有一个新的护理订单待确认，请尽快查看并接单。</p>
                            </div>
                            <div class="message-action">
                                <div class="action-button primary" onclick="viewOrder('ORD20231104001')">查看订单</div>
                                <div class="action-button secondary" onclick="markAsRead(2)">标为已读</div>
                            </div>
                        </div>
                        <div class="swipe-action" onclick="deleteMessage(2)">删除</div>
                    </div>
                    
                    <!-- 支付消息 -->
                    <div class="message-item payment-message" id="msg-3">
                        <div class="message-content-wrapper">
                            <div class="message-header">
                                <div class="message-title">
                                    收入到账通知
                                </div>
                                <div class="message-time">2023-11-03 09:15</div>
                            </div>
                            <div class="message-content">
                                <p>您的护理服务收入 ¥350.00 已到账，请查收。</p>
                            </div>
                            <div class="message-action">
                                <div class="action-button primary" onclick="viewIncome()">查看明细</div>
                                <div class="action-button secondary" onclick="deleteMessage(3)">删除</div>
                            </div>
                        </div>
                        <div class="swipe-action" onclick="deleteMessage(3)">删除</div>
                    </div>
                    
                    <!-- 系统消息 -->
                    <div class="message-item system-message" id="msg-4">
                        <div class="message-content-wrapper">
                            <div class="message-header">
                                <div class="message-title">
                                    系统维护通知
                                </div>
                                <div class="message-time">2023-11-02 20:30</div>
                            </div>
                            <div class="message-content">
                                <p>尊敬的护工：系统将于2023年11月5日凌晨2:00-4:00进行例行维护，届时部分功能可能暂时无法使用。感谢您的理解与支持。</p>
                            </div>
                            <div class="message-action">
                                <div class="action-button primary" onclick="viewMessageDetail(4)">查看详情</div>
                                <div class="action-button secondary" onclick="deleteMessage(4)">删除</div>
                            </div>
                        </div>
                        <div class="swipe-action" onclick="deleteMessage(4)">删除</div>
                    </div>
                </div>
            </div>
            
            <!-- 系统通知 -->
            <div id="tab-1" class="tab-content">
                <div class="read-all" onclick="markAllAsRead('system')">全部标为已读</div>
                
                <div class="message-list">
                    <!-- 系统消息 -->
                    <div class="message-item system-message" id="msg-sys-1">
                        <div class="message-content-wrapper">
                            <div class="message-header">
                                <div class="message-title">
                                    <span class="message-badge"></span>
                                    实名认证审核通过
                                </div>
                                <div class="message-time">2023-11-05 10:30</div>
                            </div>
                            <div class="message-content">
                                <p>您的实名认证信息已审核通过，现在可以正常接单工作了。</p>
                            </div>
                            <div class="message-action">
                                <div class="action-button primary" onclick="viewMessageDetail(1)">查看详情</div>
                                <div class="action-button secondary" onclick="markAsRead('sys-1')">标为已读</div>
                            </div>
                        </div>
                        <div class="swipe-action" onclick="deleteMessage('sys-1')">删除</div>
                    </div>
                    
                    <!-- 系统消息 -->
                    <div class="message-item system-message" id="msg-sys-2">
                        <div class="message-content-wrapper">
                            <div class="message-header">
                                <div class="message-title">
                                    系统维护通知
                                </div>
                                <div class="message-time">2023-11-02 20:30</div>
                            </div>
                            <div class="message-content">
                                <p>尊敬的护工：系统将于2023年11月5日凌晨2:00-4:00进行例行维护，届时部分功能可能暂时无法使用。感谢您的理解与支持。</p>
                            </div>
                            <div class="message-action">
                                <div class="action-button primary" onclick="viewMessageDetail(4)">查看详情</div>
                                <div class="action-button secondary" onclick="deleteMessage('sys-2')">删除</div>
                            </div>
                        </div>
                        <div class="swipe-action" onclick="deleteMessage('sys-2')">删除</div>
                    </div>
                    
                    <!-- 系统消息 -->
                    <div class="message-item system-message" id="msg-sys-3">
                        <div class="message-content-wrapper">
                            <div class="message-header">
                                <div class="message-title">
                                    护工助手更新通知
                                </div>
                                <div class="message-time">2023-10-28 14:20</div>
                            </div>
                            <div class="message-content">
                                <p>护工助手App已更新到v2.3.0版本，新增离岗申请、证书管理等功能，优化了考勤打卡体验。</p>
                            </div>
                            <div class="message-action">
                                <div class="action-button primary" onclick="viewMessageDetail('sys-3')">查看详情</div>
                                <div class="action-button secondary" onclick="deleteMessage('sys-3')">删除</div>
                            </div>
                        </div>
                        <div class="swipe-action" onclick="deleteMessage('sys-3')">删除</div>
                    </div>
                </div>
            </div>
            
            <!-- 订单消息 -->
            <div id="tab-2" class="tab-content">
                <div class="read-all" onclick="markAllAsRead('order')">全部标为已读</div>
                
                <div class="message-list">
                    <!-- 订单消息 -->
                    <div class="message-item order-message" id="msg-order-1">
                        <div class="message-content-wrapper">
                            <div class="message-header">
                                <div class="message-title">
                                    <span class="message-badge"></span>
                                    新订单提醒
                                </div>
                                <div class="message-time">2023-11-04 15:45</div>
                            </div>
                            <div class="message-content">
                                <p>您有一个新的护理订单待确认，请尽快查看并接单。</p>
                            </div>
                            <div class="message-action">
                                <div class="action-button primary" onclick="viewOrder('ORD20231104001')">查看订单</div>
                                <div class="action-button secondary" onclick="markAsRead('order-1')">标为已读</div>
                            </div>
                        </div>
                        <div class="swipe-action" onclick="deleteMessage('order-1')">删除</div>
                    </div>
                    
                    <!-- 订单消息 -->
                    <div class="message-item order-message" id="msg-order-2">
                        <div class="message-content-wrapper">
                            <div class="message-header">
                                <div class="message-title">
                                    订单状态更新
                                </div>
                                <div class="message-time">2023-11-01 09:30</div>
                            </div>
                            <div class="message-content">
                                <p>您的订单 ORD20231031002 已完成，请查看订单详情并确认完成状态。</p>
                            </div>
                            <div class="message-action">
                                <div class="action-button primary" onclick="viewOrder('ORD20231031002')">查看订单</div>
                                <div class="action-button secondary" onclick="deleteMessage('order-2')">删除</div>
                            </div>
                        </div>
                        <div class="swipe-action" onclick="deleteMessage('order-2')">删除</div>
                    </div>
                    
                    <!-- 订单消息 -->
                    <div class="message-item order-message" id="msg-order-3">
                        <div class="message-content-wrapper">
                            <div class="message-header">
                                <div class="message-title">
                                    订单评价提醒
                                </div>
                                <div class="message-time">2023-10-30 18:15</div>
                            </div>
                            <div class="message-content">
                                <p>您的护理服务获得了5星好评，点击查看详情。</p>
                            </div>
                            <div class="message-action">
                                <div class="action-button primary" onclick="viewOrder('ORD20231025001')">查看评价</div>
                                <div class="action-button secondary" onclick="deleteMessage('order-3')">删除</div>
                            </div>
                        </div>
                        <div class="swipe-action" onclick="deleteMessage('order-3')">删除</div>
                    </div>
                </div>
            </div>
            
            <!-- 消息详情页面 -->
            <div id="message-detail" class="detail-page">
                <div class="detail-title">实名认证审核通过</div>
                <div class="detail-metadata">
                    <div class="detail-time">2023-11-05 10:30</div>
                    <div class="detail-category">系统通知</div>
                </div>
                <div class="detail-content">
                    <p>尊敬的张护工：</p>
                    <p>恭喜您！您提交的实名认证资料已通过我们的审核。现在，您可以开始接单并提供护理服务了。</p>
                    <p>请确保您的个人资料和技能标签已完善，这将有助于患者更好地了解您的专业背景和护理能力。如需修改或补充信息，可前往"个人中心 > 基本资料"进行操作。</p>
                    <p>我们也建议您查看并熟悉平台的服务规范和操作指南，以便更好地开展工作。如有任何问题，欢迎联系客服中心咨询。</p>
                    <p>护工助手团队祝您工作顺利！</p>
                </div>
                <div class="close-detail">
                    <div class="close-button" onclick="closeMessageDetail()">返回消息列表</div>
                </div>
            </div>
        </div>
        
        <!-- 底部导航栏 -->
        <nav class="bottom-nav">
            <a href="index.html" class="nav-item">
                <span class="nav-icon">🏠</span>
                <span>首页</span>
            </a>
            <a href="signin-center.html" class="nav-item">
                <span class="nav-icon">✓</span>
                <span>签到中心</span>
            </a>
            <a href="orders.html" class="nav-item">
                <span class="nav-icon">📋</span>
                <span>订单中心</span>
            </a>
            <a href="profile.html" class="nav-item active">
                <span class="nav-icon">👤</span>
                <span>我的</span>
            </a>
        </nav>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 更新顶部时间
            function updateTime() {
                const now = new Date();
                const hours = now.getHours().toString().padStart(2, '0');
                const minutes = now.getMinutes().toString().padStart(2, '0');
                document.querySelector('.time').textContent = `${hours}:${minutes}`;
            }
            
            updateTime();
            setInterval(updateTime, 60000);
        });
        
        // 切换标签页
        function switchTab(tabIndex) {
            // 隐藏所有标签页内容
            document.querySelectorAll('.tab-content').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // 移除所有标签的激活状态
            document.querySelectorAll('.tab-item').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // 显示选中的标签页内容
            document.getElementById(`tab-${tabIndex}`).classList.add('active');
            
            // 设置选中标签的激活状态
            document.querySelectorAll('.tab-item')[tabIndex].classList.add('active');
        }
        
        // 查看消息详情
        function viewMessageDetail(messageId) {
            // 隐藏消息列表
            document.querySelectorAll('.tab-content').forEach(tab => {
                tab.style.display = 'none';
            });
            
            // 显示消息详情
            document.getElementById('message-detail').style.display = 'block';
            
            // 标记为已读
            markAsRead(messageId);
        }
        
        // 关闭消息详情
        function closeMessageDetail() {
            // 隐藏消息详情
            document.getElementById('message-detail').style.display = 'none';
            
            // 显示当前活动的标签页
            document.querySelector('.tab-content.active').style.display = 'block';
        }
        
        // 标记消息为已读
        function markAsRead(messageId) {
            // 移除红点标记
            const message = document.getElementById(`msg-${messageId}`);
            if (message) {
                const badge = message.querySelector('.message-badge');
                if (badge) {
                    badge.style.display = 'none';
                }
            }
            
            showToast('已标记为已读');
        }
        
        // 标记所有消息为已读
        function markAllAsRead(type = 'all') {
            // 根据类型选择要处理的消息
            let selector;
            if (type === 'all') {
                selector = '.message-badge';
            } else if (type === 'system') {
                selector = '#tab-1 .message-badge';
            } else if (type === 'order') {
                selector = '#tab-2 .message-badge';
            }
            
            // 隐藏所有红点标记
            document.querySelectorAll(selector).forEach(badge => {
                badge.style.display = 'none';
            });
            
            showToast('全部已标记为已读');
        }
        
        // 删除消息
        function deleteMessage(messageId) {
            // 获取消息元素
            const message = document.getElementById(`msg-${messageId}`);
            if (message) {
                // 添加动画效果
                message.style.height = message.offsetHeight + 'px';
                message.style.transition = 'height 0.3s, opacity 0.3s';
                
                // 延迟一帧以确保高度设置生效
                requestAnimationFrame(() => {
                    message.style.height = '0';
                    message.style.opacity = '0';
                    message.style.padding = '0';
                    message.style.marginBottom = '0';
                    message.style.overflow = 'hidden';
                    
                    // 动画结束后移除元素
                    setTimeout(() => {
                        message.remove();
                    }, 300);
                });
                
                showToast('消息已删除');
            }
        }
        
        // 查看订单
        function viewOrder(orderId) {
            showToast(`正在查看订单 ${orderId}`);
            setTimeout(() => {
                window.location.href = `order-detail.html?id=${orderId}`;
            }, 500);
        }
        
        // 查看收入
        function viewIncome() {
            showToast('正在跳转到收入明细');
            setTimeout(() => {
                window.location.href = 'income.html';
            }, 500);
        }
        
        // 轻提示
        function showToast(message) {
            // 检查是否已有toast
            let toast = document.querySelector('.toast');
            if (toast) {
                toast.remove();
            }
            
            // 创建新的toast
            toast = document.createElement('div');
            toast.className = 'toast';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            // 样式
            toast.style.position = 'fixed';
            toast.style.left = '50%';
            toast.style.bottom = '10%';
            toast.style.transform = 'translateX(-50%)';
            toast.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
            toast.style.color = 'white';
            toast.style.padding = '10px 20px';
            toast.style.borderRadius = '20px';
            toast.style.fontSize = '14px';
            toast.style.zIndex = '9999';
            toast.style.opacity = '0';
            toast.style.transition = 'opacity 0.3s';
            
            // 显示和自动隐藏
            setTimeout(() => {
                toast.style.opacity = '1';
            }, 10);
            
            setTimeout(() => {
                toast.style.opacity = '0';
                setTimeout(() => {
                    toast.remove();
                }, 300);
            }, 2000);
        }
    </script>
</body>
</html>